<!--
 * @Author: MrLee
 * @Date: 2024-09-10 09:07:42
 * @LastEditors: MrLee
 * @LastEditTime: 2024-09-10 10:52:45
 * @Description: 请填写简介
-->
<template>
  <view class="company bg-#1f50f2">
    <CustomNavbar title="" auto-back bg-color="#1f50f2" left-icon-color="#fff" height="104"
      :title-style="{ color: '#fff' }" />
    <view class="min-h-100vh w-[750rpx] rounded-[16rpx_16rpx_0rpx_0rpx] bg-#ffffff px-24rpx py-40rpx">
      <view class="fixed w-100% top-[208rpx] z-[99] left-0 px-44rpx">
        <up-image width="120rpx" height="120rpx" shape="circle" :src="userInfo.avatar" />
        <view class="flex items-center mt-16rpx">
          <view class="text-[#1d2129] text-[28rpx] mr-18rpx">{{userInfo.name}}</view>
          <view class="iconfont icon-a-zu121794"></view>
        </view>
        <view class="flex items-center mt-22rpx">
          <view class="px-12rpx py-6rpx bg-#edeef0 rounded-[4rpx] text-[#4e5969] text-[24rpx] mr-20rpx">
            {{userInfo.company_name}}
          </view>
          <view class="px-12rpx py-6rpx bg-#edeef0 rounded-[4rpx] text-[#4e5969] text-[24rpx] mr-20rpx">
            {{userInfo.duty}}
          </view>
        </view>
        <view class="flex items-center mt-22rpx text-[#1d2129]">
          <view>处理简历时间:</view>
          <view>{{userInfo.work_start_time}}-{{userInfo.work_end_time}}</view>
        </view>
        <view class="flex items-center mt-22rpx text-[#1d2129]">
          <view>所在地区:</view>
          <view>{{userInfo.province}}·{{userInfo.city}}</view>
        </view>
        <view class="flex items-start mt-22rpx text-[#1d2129]">
          <view class="min-w-[100rpx]">自我介绍:</view>
          <view>{{userInfo.show}}</view>
        </view>

        <view class="mt-20rpx bg-#f4f7fe rounded-[16rpx] px-28rpx py-20rpx">
          <view class="flex items-center">
            <view style="font-size: 34rpx" class="iconfont icon-a-zu121769 text-[34rpx] mr-6rpx"></view>
            <view class="text-[#4e5969] text-[24rpx]">手机:{{userInfo.phone}}</view>
          </view>
          <view class="flex items-center">
            <view style="font-size: 34rpx" class="iconfont icon-a-zu121740 text-[34rpx] mr-6rpx"></view>
            <view class="text-[#4e5969] text-[24rpx]">邮箱:{{userInfo.email}}</view>
          </view>
        </view>

        <view class="mt-40rpx shadow-[0px_3px_8px_0px_rgba(191,191,191,0.26)] rounded-[10px] bg-#fff px-24rpx py-24rpx">
          <view class="flex items-center pb-22rpx mb-22rpx" style="border-bottom: 1px dashed #ededed">
            <up-image width="96rpx" height="96rpx" shape="circle" />
            <view class="ml-16rpx flex flex-col justify-between h-96rpx">
              <view class="text-[26rpx]">{{userInfo.company_name}} | {{userInfo.company_listed}}</view>
              <view class="flex items-center text-[#6e6d72] text-[24rpx]">
                <view>{{userInfo.company_province}}·{{userInfo.company_city}}<span class="mx-14rpx">|</span></view>
                <view>{{userInfo.type}}<span class="mx-14rpx">|</span></view>
                <view>{{userInfo.company_num}}<span class="mx-14rpx">|</span></view>
                <view>成立{{userInfo.company_born}}年</view>
              </view>
            </view>
          </view>
          <view class="flex flex-wrap">
            <view v-for="(item, index) in infoTag" :key="index"
              class="py-10rpx mr-20rpx px-24rpx text-[#F57100] text-[24rpx] bg-#fcf8e9 rounded-[28rpx]">{{ item }}
            </view>
          </view>
        </view>
      </view>

      <view> </view>
    </view>
  </view>
  <view
    class="fixed bottom-0 left-0 w-100% bg-#fff px-30rpx pt-24rpx pb-safe  shadow-[0px_0px_6px_0px_rgba(238,239,241,0.50)]">
    <up-button :custom-style="{
        background: '#1f50f2',
        color: '#fff',
        height: '82rpx',
        fontSize: '30rpx',
      }" shape="circle" text="立即联系" @click="goChat" />
  </view>
</template>

<script setup lang="ts">
  import { userHrDetail, getTimDataApi } from '@/api/user';
  const infoTag = reactive(["公司简介", "在招职位", "薪资福利待遇"]);
  const routerTo = () => { };


  const userInfo : any = ref({
    avatar: '',
    name: '',
    gender: '',
    duty: '',
    work_start_time: '',
    work_end_time: '',
    province: '',
    city: '',
    show: '',
    phone: '',
    email: '',
    company_id: '',
    company_born: '',
    company_logo: '',
    company_name: '',
    company_type: '',
    company_listed: '',
    company_province: '',
    company_city: '',
    company_num: ''
  })
  async function getHrInfo(hr_user_id : number) {
    let r = await userHrDetail({
      hr_user_id: hr_user_id
    });
    if (!r) {
      return;
    }
    console.log('职位Hr详情:::', r);
    let rr = {
      avatar: r.avatar,
      name: r.name,
      gender: r.gender,
      duty: r.hr.duty.name,
      work_start_time: r.hr.work_start_time,
      work_end_time: r.hr.work_end_time,
      province: r.hr.province.name,
      city: r.hr.city.name,
      show: r.hr.show,
      phone: r.phone,
      email: r.email,
      company_id: r.hr.company.id,
      company_born: r.hr.company.born_year,
      company_logo: r.hr.company.url_logo,
      company_name: r.hr.company.name,
      company_type: r.hr.company.type == 1 ? "民营" : r.company.type == 2 ? "国企" : "合资",
      company_listed: r.hr.company.listed == 1 ? "未上市" : "上市",
      company_province: r.hr.company.province.name,
      company_city: r.hr.company.city.name,
      company_num: r.hr.company.num,
    }
    userInfo.value = rr;
  }
  const hrUserId = ref('');
  const goChat = async () => {
    // let res = await getTimDataApi({ user_id: hrUserId.value })
    // userID
    uni.navigateTo({
      url: `/pages/tab/message/details/index?userID=${hrUserId.value}`
    })
  };
  onLoad((query : any) => {
    console.log('hr用户id:::', query.hr_user_id)
    hrUserId.value = query.hr_user_id
    getHrInfo(query.hr_user_id);
  })
</script>


<style scoped lang="scss">
  .company {
    ::v-deep(.u-tabs) {
      .u-tabs__wrapper__nav__line {
        &::before {
          @apply content-[""] absolute left-0 top-0 w-[120rpx] h-[8rpx] opacity-50 translate-x-[-20px] rounded-full;

          background: linear-gradient(90deg,
              #1f69fb 3%,
              rgb(83 178 252 / 0%) 98%);
        }
      }
    }
  }
</style>
